<template>
	<!--在视频外面加一个容器-->
	<div>
		<div class="left">
			<div style="width: 930px; margin: 0 auto;">
				<span style="cursor: pointer;" @click="back()">
					<<回到课程</span> <h3 style="text-align: center;margin-top: 45px;">{{chapterName}}</h3>
						<hr style="margin-top: 30px" />
						<div class="input_video">
							<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>
							<div style="margin-top: 30px;text-align: center;">
								<el-button-group style="">
									<el-button type="primary" icon="el-icon-arrow-left" plain @click="up">上一页</el-button>
									<el-button type="primary" plain @click="down">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
								</el-button-group>
							</div>
						</div>
			</div>
		</div>
		<div class="right">
			<div style="background-color: #999999;height: 45px;line-height: 45px;text-align: center;">
				<span style="font-size: 18px;">目录</span>
			</div>
			<el-tree :data="tree" :default-expand-all="true" :props="defaultProps" node-key="id" ref="tree" @current-change="currentChapter">
				<span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
					<span>{{data.name}}</span>
				</span>
			</el-tree>
		</div>
	</div>
</template>
<script>
	import {	Message,MessageBox} from 'element-ui'
	import axios from '../../../utils/axiosutils.js';
	export default {
		name: 'BusImg',
		data() {
			return {
				chapterName: '',
				courseId:'',
				chapterId:"",
				classNum:"",
				defaultProps: {
					label: 'name',
					children: 'children'
				},
				// 视频播放                
				playerOptions: {
					playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度                    
					autoplay: false, //如果true,浏览器准备好时开始回放。                    
					muted: false, // 默认情况下将会消除任何音频。                    
					loop: false, // 视频一结束就重新开始。                    
					preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）                    
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。                    
					sources: [{
						type: "",
						src: '', //url地址                    
					}],
					poster: "", //你的封面地址                    // 
					width: document.documentElement.clientWidth,
					notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。                    
					controlBar: {
						timeDivider: true, //当前时间和持续时间的分隔符                        
						durationDisplay: true, //显示持续时间                        
						remainingTimeDisplay: false, //是否显示剩余时间功能                        
						fullscreenToggle: true, //全屏按钮                    
					},
				},
				tree: [],
			}
		},
		created() {
			this.getUrl(this.$route.query.courseId, this.$route.query.chapterId)
			axios.post("/chapter/contents", resp => {
				this.tree = resp.obj;
			}, {
				courseId: this.$route.query.courseId
			})
		},
		methods: {
			getUrl(courseId, chapterId) {
				this.courseId=courseId;
				this.chapterId=chapterId;
				axios.post("/video/videoUrl", resp => {
					this.playerOptions.sources[0].src = require('G:/毕设/视频/' + resp.obj.videoSourceId);
					this.chapterName = resp.obj.title;
				}, {
					courseId: courseId,
					chapterId: chapterId
				});
			},
			currentChapter(val, node) {
				if (node.leval = 2) {
					this.courseId=node.data.courseId;
					this.chapterId=node.data.id;
					this.getUrl(node.data.courseId, node.data.id)
				}
			},
			up(){
				if(this.chapterId!=2){
					this.getUrl(this.courseId,parseInt(this.chapterId)-1);
				}
			},
			down(){
				axios.post("/course/classNum",resp=>{
					this.classNum=resp.obj.num;
				},{
					courseId:this.courseId
				});
				if(this.classNum!=this.chapterId){
					this.getUrl(this.courseId,parseInt(this.chapterId)+1);
				}	
			},
			back(){
				this.$router.push({
					name: 'mycourse',
					query: {
						courseId: this.courseId
					}
				})
			}
		}
	}
</script>
<style scoped>
	.input_video {
		width: 700px;
		/* height: 700px; */
		margin: 0 auto;
		margin-top: 100px;
	}

	.left {
		display: inline-block;
		width: 1250px;
	}

	.right {
		display: inline-block;
		vertical-align: top;
		height: 728px;
		border: #000000 1px solid;
	}

	.el-tree-node__label {
		width: auto;
		margin-top: 12px;
		float: right;
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		font-size: 14px;
		color: #000000;
		line-height: 25px;
		letter-spacing: 1px;
	}
</style>
